<template>
    <div class="second_level_page start_picking_page">
        <section class="warehouse_demo">
            <div class="warehouse_top">
                仓库代码：C410200111000200
            </div>
            <section class="inorder_demo">
                <div class="inorder_top">
                    采购单号：0706056620161011-11
                </div>
                <div class="goods_demo">
                    <div>
                        <div class="goods_demo_left left">
                            <img src="../../../images/goodsDefault.png">
                        </div>
                        <div class="goods_demo_right">
                            <div class="goods_name">商品名称</div>
                            <div class="goods_sku_sale">
                                <span class="goods_sku">规格</span>
                            </div>
                        </div>
                        <div class="btn"></div>
                    </div>
                </div>  
                <div class="goods_demo">
                    <div>
                        <div class="goods_demo_left left">
                            <img src="../../../images/goodsDefault.png">
                        </div>
                        <div class="goods_demo_right">
                            <div class="goods_name">商品名称</div>
                            <div class="goods_sku_sale">
                                <span class="goods_sku">规格</span>
                            </div>
                        </div>
                        <div class="btn active"></div>
                    </div>
                </div>  
            </section>
            <section class="inorder_demo">
                <div class="inorder_top">
                    采购单号：0706056620161011-11
                </div>
                <div class="goods_demo">
                    <div>
                        <div class="goods_demo_left left">
                            <img src="../../../images/goodsDefault.png">
                        </div>
                        <div class="goods_demo_right">
                            <div class="goods_name">商品名称</div>
                            <div class="goods_sku_sale">
                                <span class="goods_sku">规格</span>
                            </div>
                        </div>
                        <div class="btn"></div>
                    </div>
                </div>  
                <div class="goods_demo">
                    <div>
                        <div class="goods_demo_left left">
                            <img src="../../../images/goodsDefault.png">
                        </div>
                        <div class="goods_demo_right">
                            <div class="goods_name">商品名称</div>
                            <div class="goods_sku_sale">
                                <span class="goods_sku">规格</span>
                            </div>
                        </div>
                        <div class="btn active"></div>
                    </div>
                </div>  
            </section>
        </section>
        <section class="warehouse_demo">
            <div class="warehouse_top">
                仓库代码：C410200111000200
            </div>
            <section class="inorder_demo">
                <div class="inorder_top">
                    采购单号：0706056620161011-11
                </div>
                <div class="goods_demo">
                    <div>
                        <div class="goods_demo_left left">
                            <img src="../../../images/goodsDefault.png">
                        </div>
                        <div class="goods_demo_right">
                            <div class="goods_name">商品名称</div>
                            <div class="goods_sku_sale">
                                <span class="goods_sku">规格</span>
                            </div>
                        </div>
                        <div class="btn"></div>
                    </div>
                </div>  
                <div class="goods_demo">
                    <div>
                        <div class="goods_demo_left left">
                            <img src="../../../images/goodsDefault.png">
                        </div>
                        <div class="goods_demo_right">
                            <div class="goods_name">商品名称</div>
                            <div class="goods_sku_sale">
                                <span class="goods_sku">规格</span>
                            </div>
                        </div>
                        <div class="btn active"></div>
                    </div>
                </div>  
            </section>
        </section>
        <div class="heightBottom"></div>
        <section class="picking_footer">
            <div class="picking_total left">
                <svg>
                    <use :xlink:href="'#selectedActive'"></use>
                </svg>
                <span>全选</span>
                <span class="total_num">总共27件</span>
                <span class="picking_num">已验<span>16</span>件</span>
            </div>
            <div class="picking_btn right">
                提交
            </div>
        </section>
    </div>
</template>

<script>
    export default {
      data(){
            return{
            }
        },
        components: {
        },
        methods: {
        },
    }
</script>
  
<style lang="scss" scoped>
    @import 'src/style/mixin';

    .warehouse_demo{
        background: #fff;
        margin-top: .2rem;
        .warehouse_top{
            @include wh(100%, .88rem);
            padding: 0 .2rem;
            @include sc(.3rem, #333);
            line-height: .88rem;
            border-top: .01rem solid #e3e3e3;
        }
        .inorder_demo{
            background: #fff;
            .inorder_top{
                @include wh(100%, .8rem);
                padding: 0 .2rem;
                @include sc(.26rem, #999);
                line-height: .8rem;
                border-top: .01rem solid #e3e3e3;       
            }
            .goods_demo{
                @include wh(100%, 2.1rem);
                background: #fff;
                clear: both;
                border-top: .01rem solid #e3e3e3;
                position: relative;
                .goods_demo_left{
                    margin: .2rem;
                    @include wh(1.7rem, 1.7rem);
                    img{
                        @include wh(100%, 100%);
                    }
                }
                .goods_demo_right{
                    padding-top: .3rem;
                    padding-left: 2.1rem;
                    margin-right: .2rem;
                    .goods_name{
                        padding-right: 1.5rem;
                        @include sc(.3rem, #333);
                        line-height: .3rem;
                        max-height: .6rem;
                        overflow: hidden;
                    }
                    .goods_sku_sale{
                        margin-top: .2rem;
                        height: .24rem;
                        line-height: .24rem;
                        @include sc(.24rem, #999);
                        .goods_sku{
                            margin-right: .28rem;
                            @include sc(.24rem, #999);
                        }
                        .goods_sale{
                            @include sc(.24rem, #999);
                        }
                    }
                }
                .btn{
                    @include wh(1.02rem, .62rem);
                    position: absolute;
                    top: 50%;
                    right: .2rem;
                    margin-top: -.31rem;
                    background: url(../../../images/defaultBtn.png) no-repeat;
                    background-size: 100% 100%;
                }
                .btn.active{
                    background: url(../../../images/selectedBtn.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
            .goods_demo:last-child{
                border-bottom: 0;
            }
        }
    }
    .picking_footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: .96rem;
        background: #fff;
        border-top: .01rem solid #e3e3e3;
        .picking_total{
            @include wh(5.2rem, 100%);
            padding-left: .2rem;
            @include sc(.32rem, #333);
            line-height: .96rem;
            svg{
                float: left;
                margin: .28rem .1rem .28rem 0;
                @include wh(.4rem, .4rem);
            }
            span{
                margin-right: .4rem;
            }
            .total_num{
                margin-right: .28rem;
                @include sc(.28rem, #666);
            }
            .picking_num{
                @include sc(.28rem, #666);
                span{
                    margin: 0;
                    color: $blue;
                }
            }
        }
        .picking_btn{
            @include sc(.3rem, #fff);
            @include wh(2.3rem, 100%);
            background: $blue;
            text-align: center;
            line-height: .96rem;
        }
    }
</style>
